<template>
	<view class="create-circle-page">
		<!-- 顶部导航 -->
		<view class="page-header">
			<text class="page-title">新建圈子</text>
			<view class="header-right">
				<button class="submit-button" :class="{ 'disabled': !canSubmit }" :disabled="!canSubmit"
					@click="handleSubmit">
					{{ submitting ? '创建中...' : '创建' }}
				</button>
			</view>
		</view>

		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 圈子头像 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">圈子头像</text>
					<text class="required-mark">*</text>
				</view>
				<UploadAvatar v-model="formData.circleAvatar" @upload-success="handleAvatarUpload" />
			</view>

			<!-- 圈子名称 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">圈子名称</text>
					<text class="required-mark">*</text>
				</view>
				<view class="input-container">
					<input class="form-input" v-model="formData.circleName" placeholder="请输入圈子名称" maxlength="10"
						:focus="false" />
					<view class="input-counter">{{ formData.circleName.length }}/10</view>
				</view>
			</view>

			<!-- 圈子描述 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">圈子描述</text>
					<text class="required-mark">*</text>
				</view>
				<view class="textarea-container">
					<textarea class="form-textarea" v-model="formData.circleDescription"
						placeholder="介绍一下你的圈子，让更多人了解并加入..." maxlength="30" auto-height :show-confirm-bar="false" />
					<view class="textarea-counter">{{ formData.circleDescription.length }}/30</view>
				</view>
			</view>

			<!-- 等级规则系统 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">等级规则系统</text>
					<text class="required-mark">*</text>
				</view>
				<view class="select-container">
					<view class="system-select" @click="toggleSystemDropdown">
						<text class="select-text" :class="{ placeholder: !formData.systemName }">
							{{ formData.systemName || '请选择等级规则系统' }}
						</text>
						<text class="select-arrow" :class="{ active: showSystemDropdown }">▼</text>
					</view>

					<!-- 下拉选项列表 -->
					<view class="system-dropdown" v-if="showSystemDropdown">
						<scroll-view class="system-list" scroll-y="true">
							<view class="system-option" v-for="(system, index) in systemNames" :key="index"
								:class="{ selected: formData.systemName === system }" @click="selectSystem(system)">
								<text class="system-name">{{ system }}</text>
								<text class="check-icon" v-if="formData.systemName === system">✓</text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>

			<!-- 标签选择 -->
			<view class="form-section">
				<view class="section-title">
					<text class="title-text">圈子标签</text>
					<text class="required-mark">*</text>
				</view>
				<view class="tags-section">
					<!-- 已选标签 -->
					<view class="selected-tags" v-if="selectedTags.length > 0">
						<view class="tag-item selected" v-for="tag in selectedTags" :key="tag.id"
							@click="removeTag(tag)">
							<text class="tag-text">{{ tag.tagName }}</text>
							<text class="remove-icon">×</text>
						</view>
					</view>

					<!-- 标签搜索框 -->
					<view class="search-container">
						<view class="search-input-wrapper">
							<text class="search-icon">🔍</text>
							<input class="search-input" v-model="searchKeyword" placeholder="搜索标签或输入新标签"
								@input="handleSearchInput" @focus="showTagList = true" />
						</view>
					</view>

					<!-- 标签下拉列表 -->
					<view class="tags-dropdown" v-if="showTagList && (filteredTags.length > 0 || canCreateNewTag)">
						<scroll-view class="tags-list" scroll-y="true">
							<!-- 新建标签选项 -->
							<view class="tag-option create-new" v-if="canCreateNewTag" @click="showCreateTagModal">
								<text class="tag-name">+ 新建标签 "{{ searchKeyword }}"</text>
							</view>

							<!-- 现有标签列表 -->
							<view class="tag-option" v-for="tag in filteredTags" :key="tag.id" @click="selectTag(tag)">
								<text class="tag-name">{{ tag.tagName }}</text>
								<text class="tag-category">{{ tag.tagCategory }}</text>
							</view>
						</scroll-view>
					</view>

					<!-- 推荐标签 -->
					<view class="recommended-tags" v-if="!showTagList && recommendedTags.length > 0">
						<view class="recommend-title">推荐标签</view>
						<view class="recommend-list">
							<view class="tag-item recommend" v-for="tag in recommendedTags" :key="tag.id"
								@click="selectTag(tag)">
								<text class="tag-text">{{ tag.tagName }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新建标签弹窗 -->
		<view class="modal-overlay" v-if="showCreateModal" @click="hideCreateModal">
			<view class="create-tag-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">新建标签</text>
					<text class="close-icon" @click="hideCreateModal">×</text>
				</view>

				<view class="modal-content">
					<!-- 标签名称 -->
					<view class="form-section">
						<view class="section-title">
							<text class="title-text">标签名称</text>
							<text class="required-mark">*</text>
						</view>
						<input class="form-input" v-model="newTagData.tagName" placeholder="请输入标签名称" maxlength="20" />
					</view>

					<!-- 标签分类 -->
					<view class="form-section">
						<view class="section-title">
							<text class="title-text">标签分类</text>
							<text class="required-mark">*</text>
						</view>

						<!-- 分类选择/输入 -->
						<view class="category-container">
							<view class="category-toggle">
								<text class="toggle-text" :class="{ active: !showCustomCategory }"
									@click="showCustomCategory = false">选择分类</text>
								<text class="toggle-text" :class="{ active: showCustomCategory }"
									@click="showCustomCategory = true">自定义分类</text>
							</view>

							<!-- 选择现有分类 -->
							<view v-if="!showCustomCategory" class="select-category">
								<scroll-view class="category-list" scroll-y="true">
									<view class="category-item" v-for="category in tagCategories" :key="category"
										:class="{ selected: newTagData.tagCategory === category }"
										@click="selectCategory(category)">
										<text class="category-name">{{ category }}</text>
									</view>
								</scroll-view>
							</view>

							<!-- 输入自定义分类 -->
							<input v-else class="form-input" v-model="newTagData.tagCategory" placeholder="请输入新的标签分类"
								maxlength="20" />
						</view>
					</view>
				</view>

				<view class="modal-actions">
					<button class="cancel-button" @click="hideCreateModal">取消</button>
					<button class="confirm-button" :class="{ disabled: !canCreateTag }" :disabled="!canCreateTag"
						@click="createNewTag">
						{{ creatingTag ? '创建中...' : '确认创建' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="overlay" v-if="(showTagList || showSystemDropdown) && !showCreateModal" @click="hideTagList">
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		watch
	} from 'vue'
	import {
		applyCreateCircle,
		insertBatchCircleTagsRel,
		getLevelSystemNames
	} from '@/api/circle/circle'
	import {
		getTaglist,
		addTag,
		getTagCategory
	} from '@/api/tag/tag'
	import useUserStore from '@/store/modules/user'
	import UploadAvatar from './components/UploadAvatar.vue'

	const user = useUserStore().user
	const userId = ref(user.userId)

	// 响应式数据
	const formData = reactive({
		circleName: '',
		circleDescription: '',
		circleAvatar: '', // 新增头像字段
		systemName: '' // 新增系统名称字段
	})

	const submitting = ref(false)
	const allTags = ref([])
	const selectedTags = ref([])
	const searchKeyword = ref('')
	const showTagList = ref(false)

	// 等级系统相关数据
	const systemNames = ref([])
	const showSystemDropdown = ref(false)
	const showCreateModal = ref(false)
	const showCustomCategory = ref(false)
	const creatingTag = ref(false)
	const tagCategories = ref([])
	const newTagData = reactive({
		tagName: '',
		tagCategory: ''
	})

	// 计算属性
	// 计算属性
	const canSubmit = computed(() => {
		return formData.circleName.trim().length > 0 &&
			formData.circleAvatar.trim().length > 0 &&
			formData.circleDescription.trim().length > 0 &&
			formData.systemName.trim().length > 0 &&
			selectedTags.value.length > 0 &&
			!submitting.value
	})

	const filteredTags = computed(() => {
		if (!searchKeyword.value.trim()) {
			return allTags.value.slice(0, 20) // 限制显示数量
		}

		return allTags.value.filter(tag => {
			const keyword = searchKeyword.value.toLowerCase()
			return tag.tagName.toLowerCase().includes(keyword) ||
				tag.tagCategory.toLowerCase().includes(keyword)
		}).slice(0, 20)
	})

	const recommendedTags = computed(() => {
		// 过滤掉已选标签，展示推荐标签
		const selectedIds = selectedTags.value.map(tag => tag.id)
		return allTags.value
			.filter(tag => !selectedIds.includes(tag.id))
			.slice(0, 10)
	})

	// 是否可以新建标签
	const canCreateNewTag = computed(() => {
		if (!searchKeyword.value.trim()) return false

		// 检查是否已存在相同名称的标签
		const exists = allTags.value.some(tag =>
			tag.tagName.toLowerCase() === searchKeyword.value.toLowerCase()
		)

		return !exists
	})

	// 是否可以创建标签
	const canCreateTag = computed(() => {
		return newTagData.tagName.trim().length > 0 &&
			newTagData.tagCategory.trim().length > 0 &&
			!creatingTag.value
	})

	// 监听搜索关键词
	watch(searchKeyword, (newVal) => {
		if (newVal.trim()) {
			showTagList.value = true
		}
	})

	const hideTagList = () => {
		showTagList.value = false
		showSystemDropdown.value = false
	}

	const handleSearchInput = () => {
		showTagList.value = true
	}

	const selectTag = (tag) => {
		// 检查是否已经选择
		const isSelected = selectedTags.value.some(selected => selected.id === tag.id)
		if (!isSelected) {
			selectedTags.value.push(tag)
		}

		// 清空搜索框并隐藏下拉列表
		searchKeyword.value = ''
		showTagList.value = false
	}

	const removeTag = (tagToRemove) => {
		const index = selectedTags.value.findIndex(tag => tag.id === tagToRemove.id)
		if (index > -1) {
			selectedTags.value.splice(index, 1)
		}
	}

	// 显示新建标签弹窗
	const showCreateTagModal = () => {
		newTagData.tagName = searchKeyword.value.trim()
		newTagData.tagCategory = ''
		showCustomCategory.value = false
		showCreateModal.value = true
		showTagList.value = false
	}

	// 隐藏新建标签弹窗
	const hideCreateModal = () => {
		showCreateModal.value = false
		newTagData.tagName = ''
		newTagData.tagCategory = ''
		showCustomCategory.value = false
	}

	// 选择标签分类
	const selectCategory = (category) => {
		newTagData.tagCategory = category
	}

	// 创建新标签
	const createNewTag = async () => {
		if (!canCreateTag.value) return

		creatingTag.value = true
		try {
			const tagData = {
				tagName: newTagData.tagName.trim(),
				tagCategory: newTagData.tagCategory.trim(),
				createdBy: userId.value
			}

			const response = await addTag(tagData)

			if (response.code === 200 && response.data) {
				// 创建成功，将新标签添加到标签列表和已选标签
				const newTag = {
					id: response.data, // 后端返回的新标签ID
					tagName: tagData.tagName,
					tagCategory: tagData.tagCategory
				}

				// 添加到全部标签列表
				allTags.value.unshift(newTag)

				// 自动选中新创建的标签
				selectedTags.value.push(newTag)

				// 清空搜索框
				searchKeyword.value = ''

				uni.showToast({
					title: '标签创建成功',
					icon: 'success'
				})

				hideCreateModal()
			} else {
				throw new Error(response.message || '创建失败')
			}
		} catch (error) {
			console.error('创建标签失败:', error)
			uni.showToast({
				title: error.message || '创建标签失败',
				icon: 'none'
			})
		} finally {
			creatingTag.value = false
		}
	}

	// 切换系统下拉框显示状态
	const toggleSystemDropdown = () => {
		showSystemDropdown.value = !showSystemDropdown.value
	}

	// 选择系统
	const selectSystem = (system) => {
		formData.systemName = system
		showSystemDropdown.value = false
	}

	// 加载等级系统名称列表
	const loadSystemNames = async () => {
		try {
			const response = await getLevelSystemNames()
			systemNames.value = response.data || []
		} catch (error) {
			console.error('加载等级系统名称失败:', error)
			uni.showToast({
				title: '加载等级系统名称失败',
				icon: 'none'
			})
		}
	}

	const loadTags = async () => {
		try {
			const response = await getTaglist()
			allTags.value = response.rows || []
		} catch (error) {
			console.error('加载标签失败:', error)
			uni.showToast({
				title: '加载标签失败',
				icon: 'none'
			})
		}
	}

	// 加载标签分类
	const loadTagCategories = async () => {
		try {
			const response = await getTagCategory()
			tagCategories.value = response.data || []
		} catch (error) {
			console.error('加载标签分类失败:', error)
			uni.showToast({
				title: '加载标签分类失败',
				icon: 'none'
			})
		}
	}

	// 处理头像上传成功
	const handleAvatarUpload = (url) => {
		console.log('头像上传成功:', url)
		formData.circleAvatar = url
	}

	const handleSubmit = async () => {
		if (!canSubmit.value) return

		submitting.value = true

		try {
			console.log(userId.value)
			// 构建圈子数据
			const circleData = {
				circleName: formData.circleName.trim(),
				circleDescription: formData.circleDescription.trim(),
				circleAvatar: formData.circleAvatar, // 包含头像URL
				systemName: formData.systemName, // 包含系统名称
				createUserId: userId.value
			}


			// 创建圈子
			const createResponse = await applyCreateCircle(circleData)

			if (createResponse.code === 200 && createResponse.data) {
				const circleId = createResponse.data

				// 如果有选择标签，则保存标签关联
				if (selectedTags.value.length > 0 && circleId) {
					const tagRelations = selectedTags.value.map(tag => ({
						circleId: circleId,
						tagId: parseInt(tag.id)
					}))

					await insertBatchCircleTagsRel(tagRelations)
				}

				uni.showToast({
					title: '申请创建成功',
					icon: 'success'
				})

				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)

			} else {
				throw new Error(createResponse.message || '创建失败')
			}

		} catch (error) {
			console.error('创建圈子失败:', error)
			uni.showToast({
				title: error.message || '创建失败',
				icon: 'none'
			})
		} finally {
			submitting.value = false
		}
	}

	// 页面加载时获取标签列表和分类
	onMounted(() => {
		loadTags()
		loadTagCategories()
		loadSystemNames() // 加载等级系统名称
	})
</script>

<style lang="scss" scoped>
	.create-circle-page {
		min-height: 100vh;
		background-color: #f8f9fa;
		position: relative;
	}

	.page-header {
		// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		background: white;
		padding: 30rpx 30rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: black;
		position: sticky;
		top: 0;
		z-index: 100;

		.page-title {
			font-size: 42rpx;
			font-weight: bold;
			flex: 1;
			text-align: left; // 改为左对齐
		}

		.header-right {
			width: 120rpx;
			display: flex;
			justify-content: flex-end;

			.submit-button {
				background: #667eea;
				border: 2rpx solid #667eea;
				border-radius: 32rpx;
				padding: 10rpx 24rpx;
				color: white;
				font-size: 28rpx;
				backdrop-filter: blur(10rpx);
				transition: all 0.3s ease;

				&:not(.disabled):active {
					background: rgba(255, 255, 255, 0.3);
					transform: scale(0.95);
				}

				&.disabled {
					opacity: 0.5;
				}
			}
		}
	}

	.form-container {
		padding: 40rpx;
	}

	.form-section {
		margin-bottom: 48rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.required-mark {
			color: #ff4d4f;
			font-size: 32rpx;
			margin-left: 8rpx;
		}

		.optional-mark {
			color: #999;
			font-size: 24rpx;
			margin-left: 8rpx;
		}
	}

	.input-container {
		position: relative;

		.form-input {
			width: 100%;
			height: 100rpx;
			background: white;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;
			font-size: 32rpx;
			border: 2rpx solid #e8e8e8;
			transition: border-color 0.3s;

			&:focus {
				border-color: #667eea;
			}
		}

		.input-counter {
			position: absolute;
			right: 32rpx;
			bottom: 24rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.textarea-container {
		position: relative;

		.form-textarea {
			width: 100%;
			background: white;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;
			font-size: 32rpx;
			border: 2rpx solid #e8e8e8;
			min-height: 160rpx;
			transition: border-color 0.3s;

			&:focus {
				border-color: #667eea;
			}
		}

		.textarea-counter {
			position: absolute;
			right: 32rpx;
			bottom: 24rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.select-container {
		position: relative;

		.system-select {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;
			background: white;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;
			border: 2rpx solid #e8e8e8;
			transition: border-color 0.3s;
			cursor: pointer;

			&:active {
				border-color: #667eea;
			}

			.select-text {
				font-size: 32rpx;
				color: #333;
				flex: 1;

				&.placeholder {
					color: #999;
				}
			}

			.select-arrow {
				font-size: 24rpx;
				color: #999;
				transition: transform 0.3s;

				&.active {
					transform: rotate(180deg);
				}
			}
		}

		.system-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: white;
			border-radius: 16rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
			z-index: 200;
			max-height: 400rpx;
			margin-top: 8rpx;

			.system-list {
				max-height: 400rpx;

				.system-option {
					padding: 24rpx 32rpx;
					border-bottom: 1rpx solid #f0f0f0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					transition: background-color 0.3s;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background: #f8f9ff;
					}

					&.selected {
						background: #e8f4ff;

						.system-name {
							color: #667eea;
							font-weight: bold;
						}
					}

					.system-name {
						font-size: 32rpx;
						color: #333;
					}

					.check-icon {
						font-size: 32rpx;
						color: #667eea;
						font-weight: bold;
					}
				}
			}
		}
	}

	.tags-section {
		position: relative;
	}

	.selected-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-bottom: 24rpx;

		.tag-item.selected {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 12rpx 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.tag-text {
				margin-right: 8rpx;
			}

			.remove-icon {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.search-container {
		margin-bottom: 24rpx;

		.search-input-wrapper {
			display: flex;
			align-items: center;
			background: white;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;
			border: 2rpx solid #e8e8e8;
			transition: border-color 0.3s;

			&:focus-within {
				border-color: #667eea;
			}

			.search-icon {
				font-size: 32rpx;
				margin-right: 16rpx;
				color: #999;
			}

			.search-input {
				flex: 1;
				font-size: 32rpx;
				color: #333;
			}
		}
	}

	.tags-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		z-index: 200;
		max-height: 400rpx;

		.tags-list {
			max-height: 400rpx;

			.tag-option {
				padding: 24rpx 32rpx;
				border-bottom: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:last-child {
					border-bottom: none;
				}

				&:active {
					background: #f8f9ff;
				}

				&.create-new {
					background: #f0f8ff;
					border-bottom: 2rpx solid #e8e8e8;

					.tag-name {
						color: #667eea;
						font-weight: bold;
					}

					&:active {
						background: #e8f4ff;
					}
				}

				.tag-name {
					font-size: 32rpx;
					color: #333;
				}

				.tag-category {
					font-size: 24rpx;
					color: #999;
					background: #f0f0f0;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
				}
			}
		}
	}

	.recommended-tags {
		.recommend-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 16rpx;
		}

		.recommend-list {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;

			.tag-item.recommend {
				background: white;
				color: #667eea;
				border: 2rpx solid #667eea;
				padding: 12rpx 20rpx;
				border-radius: 32rpx;
				font-size: 28rpx;
				transition: all 0.3s;

				&:active {
					background: #667eea;
					color: white;
				}
			}
		}
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 150;
	}

	// 新建标签弹窗样式
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.create-tag-modal {
		background: white;
		border-radius: 24rpx;
		width: 100%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;

		.modal-header {
			padding: 32rpx 40rpx;
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			.close-icon {
				font-size: 48rpx;
				color: #999;
				font-weight: bold;
			}
		}

		.modal-content {
			padding: 32rpx 40rpx;
			max-height: 400rpx;
			overflow-y: auto;

			.form-input {
				width: 100%;
				height: 88rpx;
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 20rpx 24rpx;
				font-size: 30rpx;
				border: 2rpx solid #e8e8e8;
				transition: border-color 0.3s;

				&:focus {
					border-color: #667eea;
					background: white;
				}
			}
		}

		.modal-actions {
			padding: 24rpx 40rpx 32rpx;
			display: flex;
			gap: 24rpx;

			button {
				flex: 1;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: bold;

				&.cancel-button {
					background: #f8f9fa;
					color: #666;
					border: 2rpx solid #e8e8e8;

					&:active {
						background: #f0f0f0;
					}
				}

				&.confirm-button {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: white;
					border: none;

					&:not(.disabled):active {
						opacity: 0.8;
					}

					&.disabled {
						opacity: 0.5;
					}
				}
			}
		}
	}

	.category-container {
		.category-toggle {
			display: flex;
			background: #f8f9fa;
			border-radius: 12rpx;
			padding: 8rpx;
			margin-bottom: 24rpx;

			.toggle-text {
				flex: 1;
				text-align: center;
				padding: 16rpx;
				font-size: 28rpx;
				color: #666;
				border-radius: 8rpx;
				transition: all 0.3s;

				&.active {
					background: white;
					color: #667eea;
					font-weight: bold;
				}
			}
		}

		.select-category {
			.category-list {
				max-height: 200rpx;
				background: #f8f9fa;
				border-radius: 12rpx;

				.category-item {
					padding: 20rpx 24rpx;
					border-bottom: 1rpx solid #e8e8e8;

					&:last-child {
						border-bottom: none;
					}

					&.selected {
						background: #e8f4ff;

						.category-name {
							color: #667eea;
							font-weight: bold;
						}
					}

					&:active {
						background: #f0f0f0;
					}

					.category-name {
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>